<template>
	<view>
		<hx-navbar ref="hxnb" :config="config">
			<block slot="max">
				<view class="nav_wrap flex">
					<view class="back_wrap flex" @click="back">
						<u-icon name="arrow-left" color="#333" size="36"></u-icon>
					</view>
					<view class="page_title font_18_333">
						个人主页
					</view>
				</view>
			</block>
		</hx-navbar>
		<view class="main-div">
			<image class="main-bg" src="../../../../static/img/lawyer/lsxq-bg.png" mode=""></image>
			<view class="zhanwei" :style="{'height':statusBarHeight+'rpx'}"></view>
			<view class="m-d">
				<view class="m-top flex flex_sb">
					<view class="m-top-left">
						<view class="flex">
							<view class="ls-name">
								{{lsdetail.name}}
								<!-- {{lsdetail.type==1?'律师':'法学生'}} -->
							</view>
							<image class="h23 u-m-l-10" src="../../../../static/img/home/h23.png" mode="aspectFill">
							</image>
							<image class="fx-icon" src="../../../../static/img/mine/bj-icon.png" mode="" @click="bianji"></image>
							<button open-type="share" style="background-color: rgba(0, 0, 0, 0);">
								<image class="fx-icon" src="../../../../static/img/home/fx-icon.png" mode=""></image>
							</button>
							
						</view>
						<view class=" flex">
							<view class="zhizhao line_1">
								执业认证 {{lsdetail.license_num}}
							</view>
						</view>
					</view>
					<view class="m-top-r">
						<image class="headimg" :src="lsdetail.avatar" mode="aspectFill"></image>

					</view>
				</view>
				<view class="jianjie">
					<view class="flex">
						<view class="font_weight">擅长：</view>
						<view class="flex">
							<view class="bq-item" :class="index==1?'bq2':index==2?'bq3':'bq1'"
							 v-for="(item,index) in lsdetail.tags" :key="index">
								{{item}}
							</view>
							<!-- <view class="bq2 bq-item">
								交通事故
							</view>
							<view class="bq3 bq-item">
								领域标签
							</view> -->
						</view>
					</view>
					<view class="u-m-t-20 line_3">
						简介：{{lsdetail.profile_note}}
					</view>
					<view class="font_weight u-m-t-20">教育背景：</view>
					<view class="u-m-t-10 line_3">
						{{lsdetail.educate_note}}
					</view>
					<view class="font_weight u-m-t-20">荣誉奖项：</view>
					<view class="u-m-t-10 line_3">
						{{lsdetail.honor_note}}
					</view>

				</view>
			</view>
		</view>


		<view class="u-padding-32">
			<u-tabs bg-color="#F5F5F6" active-color="#000" inactive-color="#727272" :list="list" :is-scroll="false"
				:current="current" @change="change"></u-tabs>
			<view class="tab-div u-m-t-30">
				<view class="pingjia" v-if="current==0">
					<view class="pingjia-top flex flex_cen">
						<view class="flex">
							<view class="pj-num">
								{{lsdetail.mark}}
							</view>
							<view class="pj-xing flex u-m-l-40">
								<image src="../../../../static/img/home/h24.png" mode="" v-for="i in lsdetail.mark" :key="i"></image>
							</view>
						</view>
					</view>
					<view class="flex flex_sb u-m-t-26">
						<view class="font_16_333">
							用户评论（{{pinglunList.length}}）
						</view>
						<!-- <view class="font_12_666">
							更多
							<u-icon name="arrow-right" color="#666" size="20"></u-icon>
						</view> -->
					</view>
					<view class="pj-main ">
						<view class="pj-item flex_only" v-for="(item,index) in pinglunList" :key="index">
							<image class="headimg" :src="item.user.image" mode=""></image>
							<view class="u-m-l-16" style="width: 540rpx;">
								<view class="flex flex_sb font_14_666">
									<view class="">
										{{item.is_show==1?'匿名用户':item.user.name}}
									</view>
									<view class="">
										{{item.created_at}}
									</view>
								</view>
								<view class="u-m-t-16">
									{{item.content}}
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="anli" v-if="current==1">
					<view class="flex flex_end ">
						<view class="gl-btn" @click="guanli(1)">
							<u-icon name="list-dot" color="#666" size="28"></u-icon>
							管理
						</view>
					</view>
					<view class="kong-div" v-if="anliList.length==0">
						<image class="kongimg" src="../../../../static/img/lawyerVersion/kongimg.png" mode=""></image>
						<view class="font_14_999 u-m-t-20 text_center">
							暂无案例，快去添加案例吧！
						</view>
						<view class="kong-btn" @click="addde(1)">
							添加案例
						</view>
					</view>
					<u-time-line v-else>
						<u-time-line-item nodeTop="12" v-for="(item2,index2) in anliList" :key="index2">
							<template v-slot:node>
								<view class="u-node"></view>
							</template>
							<template v-slot:content>
								<view @click="todetail(1,item2)">
									<view class="">
										<span class="u-order-title">{{item2.created_at}}</span>
									</view>

									<view class="u-order-desc">
										{{item2.title}}
									</view>
								</view>
							</template>
						</u-time-line-item>
					</u-time-line>
					<!-- <view class="text_center font-24-0062FF">
						查看更多案例
						<u-icon name="arrow-down" color="#0062FF" size="20"></u-icon>
					</view> -->
				</view>

				<view class="zhishi" v-if="current==2">
					<view class="flex flex_end ">
						<view class="gl-btn" @click="guanli(2)">
							<u-icon name="list-dot" color="#666" size="28"></u-icon>
							管理
						</view>
					</view>
					<view class="kong-div" v-if="zhishiList.length==0">
						<image class="kongimg" src="../../../static/img/lawyerVersion/kongimg.png" mode=""></image>
						<view class="font_14_999 u-m-t-20 text_center">
							暂无知识分享，快去添加知识分享吧！
						</view>
						<view class="kong-btn" @click="addde(2)">
							添加知识分享
						</view>
					</view>
					<view class="zs-item" v-else v-for="(item2,index2) in zhishiList" :key="index2" @click="todetail(2,item2)">
						<view class="line_1 font_weight">
							{{item2.title}}
						</view>
						<view class="u-m-t-16 line_3 font_14_666 linhe48">
							<rich-text :nodes="item2.description"></rich-text>
						</view>
					</view>
				</view>
				
				
				<view class=" " v-if="current==3">
					<view class="flex flex_end ">
						<view class="gl-btn" @click="guanli(3)">
							<u-icon name="list-dot" color="#666" size="28"></u-icon>
							管理
						</view>
					</view>
					<view class="kong-div" v-if="fahaiList.length==0">
						<image class="kongimg" src="../../../static/img/lawyerVersion/kongimg.png" mode=""></image>
						<view class="font_14_999 u-m-t-20 text_center">
							暂无法海视频，快去添加吧！
						</view>
						<view class="kong-btn" @click="addde(3)">
							添加
						</view>
					</view>
					<view class="pro-div flex flex_wrap flex_sb" v-else>
						<view class="pro-item" v-for="(item,index) in fahaiList" :key="index" @click="tidetail(item)">
							<view class="pro-img">
								<image v-if="item.images && item.images.length>0" class="pro-item-img" :src="item.images[0]" mode="aspectFill"></image>
								<image v-if="item.images && item.images.length>0 && item.images[0].split('.').pop()=='mp4'" class="pro-item-bf" src="../../../../static/img/home/bofang-icon.png" mode=""></image>
							</view>
							<view class="u-m-t-12">
								<view class="line_1 textitl">
									{{item.title}}
								</view>
								
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import fuwuList from '../../../../components/fuwuList/fuwuList.vue';
	var statusBarHeight = (uni.getSystemInfoSync().statusBarHeight * 2);
	export default {
		components: {
			fuwuList
		},
		data() {
			return {
				statusBarHeight: statusBarHeight,
				config: {
					maxSlot: true,
					back: false,
					barPlaceholder: false,
					backgroundColor: [0, '#FFFFFF'],
					slideBackgroundColor: [1, '#FFFFFF']
				},
				list: [{
					name: '用户评价'
				}, {
					name: '案例'
				}, {
					name: '知识分享',
				}, {
					name: '法海视频',
				}],
				current: 0,

				smShow: false,
				lsdetail:[],
				anliList:[],
				zhishiList:[],
				fahaiList:[],
				pinglunList:[]
			}
		},
		onShareAppMessage(res) {
			return {
				imageUrl: this.lsdetail.avatar,
				title: this.lsdetail.name,
				path: "/pages/lawyer/lawyerDetail?id=" + this.lsdetail.id + '&share=true',
			}
		},
		onPageScroll(e) {
			// 重点，用到滑动切换必须加上
			this.$refs.hxnb.pageScroll(e);
		},
		onShow() {
			this.getanli()
			this.gezhishi()
			this.gefahai()
			this.pinglun()
		},
		onLoad(e) {
			if(e.type){
				this.current = e.type
			}
			this.getInfo()
		},
		methods: {
			//个人信息
			getInfo() {
				
				this.$api({
					url: '/lawyer/getLawyer',
					method: 'get',
					data: {
						token:uni.getStorageSync("token")
					},
				}).then(res => {
					if (res.code == 1) {
						this.$api({
							url: '/lawyer/detail',
							method: 'get',
							data: {
								lawyer_id:res.data.id,
							},
						}).then(res2 => {
							if (res2.code == 1) {
								this.lsdetail = res2.data
							} 
						})
					} 
				})
			},
			pinglun(){
				this.$api({
					url: '/lawyer/my_detail_comment',
					method: 'get',
					data: {
						limit:1000,
						lawyer_id:'0'
					},
				}).then(res => {
					if (res.code == 1) {
						this.pinglunList = res.data.data
					} 
				})
			},
			getanli(){
				this.$api({
					url: '/lawyer/my_getCaseList',
					method: 'get',
					data: {
						limit:1000,
						token:uni.getStorageSync("token"),
						lawyer_id:0 //律师ID，所有数据传-1，自己数据传0，其它律师数据传具体ID
					},
				}).then(res => {
					if (res.code == 1) {
						this.anliList = res.data.list
					} 
				})
			},
			gezhishi(){
				this.$api({
					url: '/lawyer/my_getKnowledgeList',
					method: 'get',
					data: {
						limit:1000,
						token:uni.getStorageSync("token"),
						lawyer_id:0 //律师ID，所有数据传-1，自己数据传0，其它律师数据传具体ID
					},
				}).then(res => {
					if (res.code == 1) {
						this.zhishiList = res.data.list
					} 
				})
			},
			gefahai(){
				this.$api({
					url: '/lawyer/my_getSeaList',
					method: 'get',
					data: {
						limit:1000,
						token:uni.getStorageSync("token"),
						lawyer_id:0 //律师ID，所有数据传-1，自己数据传0，其它律师数据传具体ID
					},
				}).then(res => {
					if (res.code == 1) {
						this.fahaiList = res.data.list
					} 
				})
			},
			bianji(){
				uni.navigateTo({
					url: "/subPackageA/pages/lawyerVersion/mine/userInfo"
				})
			},
			change(index) {
				this.current = index;
			},
			back() {
				uni.navigateBack()
			},
			todetail(e,item) {
				uni.navigateTo({
					url: "/pages/lawyer/anliDetail?type=" + e + "&id="+item.id
				})
			},
			tidetail(e){
				uni.navigateTo({
					url: "/pages/index/fahaiDetail?id="+e.id
				})
			},
			addde(e){
				if(e==1){
					uni.navigateTo({
						url: "/subPackageA/pages/lawyerVersion/mine/addanli"
					})
				}else if(e==2){
					uni.navigateTo({
						url: "/subPackageA/pages/lawyerVersion/mine/addzhishi"
					})
				}else if(e==3){
					uni.navigateTo({
						url: "/subPackageA/pages/lawyerVersion/mine/addfahai"
					})
				}
				
			},
			guanli(e){
				if(e==1){
					uni.navigateTo({
						url: "/subPackageA/pages/lawyerVersion/mine/myAnli"
					})
				}else if(e==2){
					uni.navigateTo({
						url: "/subPackageA/pages/lawyerVersion/mine/myZhishi"
					})
				}else if(e==3){
					uni.navigateTo({
						url: "/subPackageA/pages/lawyerVersion/mine/myFahai"
					})
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	.kong-div{
		
		.kongimg{
			width: 140rpx;
			height: 128rpx;
			margin: 0 auto;
		}
		.kong-btn{
			width: 184rpx;
			height: 56rpx;
			background: #FFEBEB;
			border-radius: 32rpx 32rpx 32rpx 32rpx;
			border: 2rpx solid #FF9D9D;
			font-weight: bold;
			line-height: 56rpx;
			text-align: center;
			font-size: 24rpx;
			color: #F81B19;
			margin: 32rpx auto;
		}
	}
	.pro-div{
		.pro-item{
			margin-top: 24rpx;
			.pro-img{
				position: relative;
				width: 300rpx;
				height: 408rpx;
				border-radius: 8rpx;
				background-color: #eee;
				.pro-item-img{
					position: absolute;
					top: 0;
					left: 0;
					width: 300rpx;
					height: 408rpx;
					border-radius: 8rpx;
					
				}
				.pro-item-bf{
					position: absolute;
					bottom: 20rpx;
					right: 20rpx;
					width: 40rpx;
					height: 40rpx;
				}
			}
			.textitl{
				width: 300rpx;
				font-weight: bold;
				font-size: 28rpx;
				color: #333333;
			}
			.headimg{
				width: 36rpx;
				height: 36rpx;
				border-radius: 50%;
			}
		}
	}
	.gl-btn{
		width: 130rpx;
		height: 48rpx;
		border-radius: 24rpx 24rpx 24rpx 24rpx;
		border: 2rpx solid #605F6A;
		text-align: center;
		line-height: 48rpx;
	}
	.po-bikan {
		padding: 40rpx 34rpx;
		background: #FFFFFF;
		width: 690rpx;

		.bk-title {
			font-weight: bold;
			font-size: 32rpx;
			color: #222222;
		}

		.po-item {
			margin-top: 36rpx;
		}

		.bk-content {
			width: 582rpx;

		}

		.po-icon {
			width: 56rpx;
			height: 56rpx;
		}


	}

	.lin36 {
		line-height: 36rpx;
	}

	.tab-div {
		width: 686rpx;
		// height: 672rpx;
		padding: 32rpx;
		background: #FFFFFF;
		border-radius: 16rpx 16rpx 16rpx 16rpx;

		.linhe48 {
			line-height: 40rpx;
		}

		.font-24-0062FF {
			font-size: 24rpx;
			color: #0062FF;
		}

		.zs-item {
			padding: 32rpx 0;
			border-bottom: 2rpx solid #EFEFEF;
		}

		.anli {
			.u-node {
				width: 12rpx;
				height: 12rpx;
				background: #FC3A30;
				border-radius: 50%;
			}

			.u-order-title {
				font-size: 20rpx;
				color: #666666;
				padding: 6rpx 12rpx;
				background: #F4F4F4;
				border-radius: 8rpx 8rpx 8rpx 8rpx;
			}

			.u-order-desc {
				font-size: 28rpx;
				color: #000000;
				line-height: 48rpx;
				margin-top: 26rpx;
			}
		}



		.pingjia {

			.pingjia-top {
				width: 624rpx;
				height: 94rpx;
				background: linear-gradient(180deg, #FCF6F3 0%, #FFFFFF 100%);
				border-radius: 12rpx 12rpx 12rpx 12rpx;

				.pj-num {
					font-weight: bold;
					font-size: 44rpx;
					color: #FD8643;
				}

				.pj-xing {


					image {
						width: 32rpx;
						height: 32rpx;
						margin-right: 8rpx;
					}
				}
			}

			.pj-main {
				margin-top: 20rpx;

				.pj-item {
					padding: 32rpx 0;
					border-bottom: 2rpx solid #F7F7F7;


					.headimg {
						width: 60rpx;
						height: 60rpx;
						border-radius: 50%;
						background: #eee;
					}
				}
			}
		}
	}


	/deep/.u-tab-bar {
		background-color: #FC3A30 !important;
	}

	.ckda {
		text-decoration: underline;
		font-size: 24rpx;
		color: #0062FF;
		line-height: 80rpx;

	}

	.bq-item {
		margin-right: 8rpx;
		font-size: 20rpx;
		padding: 4rpx 6rpx;
		border-radius: 4rpx 4rpx 4rpx 4rpx;
	}

	.bq1 {
		color: #FF4A50;
		background: #F8EDED;
	}

	.bq2 {
		color: #5385E3;
		background: #E5F3FF;
	}

	.bq3 {
		color: #F7790D;
		background: #FFE8D3;
	}

	.ls-xing {
		width: 32rpx;
		height: 32rpx;
	}

	.ls-fs {
		font-weight: bold;
		font-size: 28rpx;
		color: #FD8643;
	}

	.ls-zy {
		padding-left: 20rpx;
		border-left: 1px #999 solid;
		// margin-left: 20rpx;
		width: 38%;
	}

	.ls-zy2 {
		border-style: none;
		width: 24%;
	}

	.nav_wrap {
		width: 100%;
		position: relative;

		.back_wrap {
			position: absolute;
			left: 24rpx;

			.diqu {
				font-weight: 600;
				font-size: 32rpx;
				color: #FFFFFF;
				margin: 0 12rpx;
			}

			.dq-icon {
				width: 28rpx;
				height: 34rpx;
			}
		}

		.page_title {
			width: 100vw;
			text-align: center;
			font-weight: bold;
		}
	}

	.main-div {
		position: relative;
		width: 100%;

		.main-bg {
			width: 100%;
			height: 792rpx;
			position: absolute;
			top: 0;
			z-index: 0;
		}

		.zhanwei {
			width: 100%;
		}
	}

	.m-d {
		position: relative;
		padding-top: 88rpx;
		z-index: 2;
	}

	.m-top {
		padding: 20rpx 40rpx;

		.m-top-left {

			.ls-name {
				font-size: 60rpx;
				color: #000000;
			}

			.h23 {
				width: 32rpx;
				height: 28rpx;
			}

			.zhizhao {
				font-size: 24rpx;
				color: #713005;
				// width: 328rpx;
				padding: 0 20rpx;
				height: 34rpx;
				background: #FBF1DE;
				border-radius: 18rpx 18rpx 18rpx 18rpx;
				margin-top: 12rpx;
				max-width: 450rpx;
			}

			.fx-icon {
				margin-left: 12rpx;
				width: 32rpx;
				height: 32rpx;

			}
		}

		.m-top-r {

			.headimg {
				width: 176rpx;
				height: 216rpx;
				border-radius: 8rpx;
			}

			.zx-s {}

			.yuan {
				width: 12rpx;
				height: 12rpx;
				background: #20C064;
				border-radius: 50%;
			}
		}

	}

	.jianjie {
		width: 686rpx;
		// height: 302rpx;
		background: #FFFFFF;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		margin: 0 auto;
		padding: 24rpx;
	}
</style>